<template>
  <view class="my-order-page">
    <view v-if="filteredOrders.length === 0" class="empty-order">
      <image src="/static/empty-order.png" class="empty-img" />
      <text class="empty-text">暂无订单</text>
    </view>
    <view v-else>
      <view
        v-for="order in filteredOrders"
        :key="order.id"
        class="order-card"
        @click="goOrderDetail(order)"
      >
        <view class="order-header">
          <text class="order-id">订单号：{{ order.order_id }}</text>
          <text class="order-status">{{ statusMap[order.status] }}</text>
        </view>
        <view class="order-goods-list">
          <view v-for="goods in order.goods" :key="goods.id" class="goods-item">
            <image :src="goods.thumb_path || goods.image || '/static/logo.png'" class="goods-img" mode="aspectFill" />
            <view class="goods-info">
              <text class="goods-title ellipsis">{{ goods.title }}</text>
              <view class="goods-meta">
                <text class="goods-count">x{{ goods.count || 1 }}</text>
                <text class="goods-price">¥{{ goods.sell_price }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-footer">
          <text>下单时间：{{ order.add_time || order.create_time }}</text>
          <text class="order-total">合计：¥{{ order.total_price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { request, BASE_URL } from '@/Requset/request'

const orders = ref<any[]>([])
const filteredOrders = ref<any[]>([])
const token = uni.getStorageSync('token') || ''
const type = ref(0)

const statusMap = {
  0: '待支付',
  1: '已支付',
  2: '已取消'
}

function getOrderType(order: any) {
  if (order.is_cancel === 1) return 2 // 已取消
  if (order.is_finish === 1) return 1 // 已支付
  return 0 // 待支付
}

onLoad((options) => {
  type.value = Number(options.type) || 0
  filteredOrders.value = orders.value.filter(order => order.status === type.value)
})

onMounted(async () => {
  const res = await request({
    url: BASE_URL + 'api/userorder',
    method: 'POST',
    header: { token }
  })
  let orderList = []
  if (Array.isArray(res.data)) {
    orderList = res.data
  } else if (res.data && Array.isArray(res.data.data)) {
    orderList = res.data.data
  }
  orders.value = orderList
  filteredOrders.value = orders.value.filter(order => order.status === type.value)
})

// 监听 orders 和 type，自动过滤
watch([orders, type], () => {
  console.log('watch触发，type:', type.value)
  orders.value.forEach(order => {
    console.log(
      '订单id:', order.id,
      'status:', order.status,
      'is_cancel:', order.is_cancel,
      'is_finish:', order.is_finish
    )
  })
  filteredOrders.value = orders.value.filter(order => order.status === type.value)
  console.log('filteredOrders:', filteredOrders.value)
})

function goOrderDetail(order: any) {
  uni.navigateTo({
    url: `/pages/Order_details/Order_details?order_id=${order.order_id}`
  })
}
</script>

<style scoped>
.my-order-page {
  padding: 24rpx;
  padding-bottom: 120rpx;
}
.order-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 24rpx;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.order-id {
  font-size: 26rpx;
  color: #333;
}
.order-status {
  font-size: 24rpx;
  color: #e64340;
}
.order-goods-list {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 12rpx 0;
  margin: 12rpx 0;
}
.goods-item {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
.goods-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
  background: #f7f7f7;
}
.goods-info {
  flex: 1;
}
.goods-title {
  font-size: 26rpx;
  color: #222;
  margin-bottom: 4rpx;
}
.goods-meta {
  display: flex;
  align-items: center;
  gap: 18rpx;
}
.goods-count {
  font-size: 24rpx;
  color: #666;
  background: #e9e9e9;
  border-radius: 8px;
  padding: 0 10rpx;
}
.goods-price {
  font-size: 26rpx;
  color: #e64340;
  font-weight: bold;
}
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #888;
}
.empty-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120rpx;
}
.empty-img {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 24rpx;
}
.empty-text {
  color: #aaa;
  font-size: 28rpx;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 300rpx;
}
</style>